<template>
  <div>
    <van-cell  is-link  @click="show = true" v-model="vanValue" >
        <template #title >
          <span class="custom-title" >{{contents}}</span>
          <van-tag type="danger">*</van-tag>
        </template>
    </van-cell>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '55%' }"
      @closed="onClosed"
    >
      <!-- 弹出层内内容 -->
      <!-- <div v-for="item in dialogData" :key="item.id" class="popupBox"> -->
        <!-- <van-cell :value="item.value" @click="onSelect(item)" /> -->
      <div class="department">
          <h2>部门选择</h2>
          <p>机关部室</p>
          <van-radio-group v-model="radio">
            <van-radio name="1">企业发展部
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-radio>
            <van-radio name="2">营销管理部
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-radio>
          </van-radio-group>
          <p>机关部室</p>
          <van-radio-group v-model="radio">
            <van-radio name="1">企业发展部
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-radio>
            <van-radio name="2">营销管理部
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-radio>
          </van-radio-group>
          <div class="footer">
            <van-button plain type="info" @click="cancel()">取消</van-button>
            <van-button type="info" @click="confirm(item)">确认</van-button>
          </div>
      </div>
      <!-- </div> -->
    </van-popup>
  </div>
</template>
<script>
import activeImg from "../../../../public/images/my/Select.png"
import inactiveImg from "../../../../public/images/my/notSelected.png"
export default {
  data() {
    return {
        radio: '1',
        show: false,
        activeIcon: activeImg,
        inactiveIcon:inactiveImg  ,
    }
  },
  props:{
    dialogData:{
      type:Array
    },
    contents:{
      type:String
    },
    vanValue:{
      type:String,
    },
  },
  mounted() {
    
  },
  methods: {
    // onSelect(item) {
    //   this.show = false;
    //   this.vanValue = item.value;
    // },
    confirm(item) {
      this.show = false;
      console.log(item,'999');
    },
    cancel(){
      this.show = false;
    },
    onClosed() {
    },
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.van-cell{
  border-bottom 1px solid #ddd
}
.van-tag--danger{
    background-color #fff
    color rgba(253, 63, 63, 1)
  }
.van-popup{
  background-color #F5F5F5
  .department{
    width 100%
    color #333
    font-size 15px
    h2{
      line-height 60px
      font-size 17px
      border-bottom 1px solid #E5E5E5
      text-align center
    }
    p{
      line-height 40px
      margin 0 15px
    }
    .van-radio-group{
      background-color #fff
      padding  15px
      box-sizing border-box
      .van-radio{
        margin 10px 0
      }
    }
  }
}
.footer{
  width 100%
  position fixed
  bottom 0
  background-color #fff
  height 70px
  .van-button{
    width 160px
    text-align center
    border-radius 10px
    margin 14px 13px
  }
}
.img-icon {
  height: 20px;
}

</style>